<script setup>
import {ref} from "vue";
import {post} from "@/request/request";


const address = ref({
  ad_recipient_name: '', //收货人的名称
  ad_street_address: '', //街道、小区名和门牌号等详细地址信息
  ad_city: '', //城市
  ad_phone_number: '', //电话号码
  ad_is_default: true,  //是否设为默认地址
  ad_state: 1, //0:家 1:公司 2:学校
})

const iconItem = [
  {
    icon: '/static/address/home.svg'
  },
  {
    icon: '/static/address/firm.svg',
  },
  {
    icon: '/static/address/position.svg',
  }
]
const positionClick = () => {
  uni.chooseLocation({
    success: function (res) {
      // console.log('位置名称：' + res.name);
      address.value.ad_city = res.name;
      // console.log('详细地址：' + res.address);
      address.value.ad_street_address = res.address;
      // console.log('纬度：' + res.latitude);
      // console.log('经度：' + res.longitude);
    }
  });
}

const backClick = () => {
  uni.navigateBack()
}

const adSwitch = (e) => {
  address.value.ad_is_default = e
}

const iconClick = (index) => {
  address.value.ad_state = index;
}

const formClick = () => {
  const {ad_recipient_name, ad_street_address, ad_city, ad_phone_number} = address.value;
  const missingFields = [];
  const phoneRegex = /^[0-9]{10,15}$/; // 根据需要调整正则表达式

  if (!ad_recipient_name) {
    uni.showToast({
      title: 'تاپشۇرۋالغۇچى ئىسمىنى تولدۇرۇڭ',
      icon: 'error',
    });
    missingFields.push('تاپشۇرۋالغۇچى ئىسمى');
  }
  if (!ad_street_address) {
    uni.showToast({
      title: 'تەپسىلى ئادرىسى',
      icon: 'error',
    });
    missingFields.push('تەپسىلى ئادرىسى');
  }
  if (!ad_city) {
    uni.showToast({
      title: 'شەھەر ئادرىسى',
      icon: 'error',
    });
    missingFields.push('شەھەر ئادرىسى');
  }
  if (!ad_phone_number) {
    uni.showToast({
      title: 'تىلفۇن نومۇر',
      icon: 'error',
    });
    missingFields.push('تىلفۇن نومۇر');
  } else if (!phoneRegex.test(ad_phone_number)) {
    uni.showToast({
      title: '无效的电话号码',
      icon: 'error',
    });
    return;
  }

  // 所有字段都有值，可以发起网络请求
  post('merchantAddress', address.value, {'sessionKey': uni.getStorageSync('sessionKey')}).then(res => {
    if (res.code === 200) {
      uni.navigateBack();
    } else if (res.code === 400) {
      uni.showToast({
        title: res.msg,
        icon: 'error',
      });
    }
  });
};

//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};

</script>
<template>
  <uv-navbar :fixed="true" :placeholder="true" @leftClick="backClick">
    <template v-slot:left>
      <view class="uv-nav-slot" @click="open">
        <image src="/static/search/arrow-left.svg"/>
      </view>
    </template>
  </uv-navbar>
  <view class="address-form">
    <view class="from">
      <form>
        <view class="from-item">
          <view>ئىسمى:</view>
          <input v-model="address.ad_recipient_name" placeholder="تاپشۇرۋالغۇچى ئىسمى"/>
        </view>
        <view class="from-item">
          <view>تىلفۇن:</view>
          <input style="margin-right: 38rpx" type="number" v-model="address.ad_phone_number"
                 placeholder="تىلفۇن نومۇرى"/>
          <view style="width: 50rpx;height: 100%;text-align: center;margin-right: 16rpx;">86+</view>
        </view>
        <view class="from-item">
          <view>ئادرىسى:</view>
          <input style="margin-right: 16rpx" v-model="address.ad_city" placeholder="ناھىيە، يىزا-بازارغىچە"/>
          <view style="width: 50rpx;height: 100%;display: flex;align-items: center;justify-content: center"
                @click="positionClick">
            <image class="position" src="/static/position.svg"/>
          </view>
        </view>
        <view class="from-item">
          <view style="height: 100%;width: 100%;display: flex;justify-content: center">
            <view>تەپسىلى ئادرىسى:</view>
            <textarea v-model="address.ad_street_address" class="textarea" placeholder="تەپسىلى ئىشىك نومۇرى"/>
          </view>
        </view>
        <view class="icons">
          <view style="display: flex;align-items: center;justify-content: space-evenly"
                v-for="(item, index) in iconItem" :key="index">
            <view class="icon-item" :class="{ 'item-select': index === address.ad_state }" @click="iconClick(index)">
              <image :src="item.icon"/>
            </view>
          </view>
        </view>
        <view class="d-address">
          <text>دائىملىق مال تاپشۇرۋىلىش ئادرىسى قىلىش</text>
          <uv-switch v-model="address.ad_is_default" @change="adSwitch"></uv-switch>
        </view>
      </form>
    </view>
    <view class="btn-box">
      <button @click="formClick">مال تاپشۇرۋىلىش ئادرىسى قوشۇش</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;

  image {
    height: 28rpx;
    width: 22rpx;
  }
}

.address-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20rpx;


  .from {
    width: 690rpx;

    .from-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;

      input {
        width: 80%;
        background: #F4F4F4;
        border-radius: 20rpx;
        padding: 10rpx;
      }

      .position {
        height: 32rpx;
        width: 28rpx;
      }

      .textarea {
        height: 100rpx;
        border-radius: 20rpx;
        width: 133%;
        background: #F4F4F4;
        padding: 10rpx;
      }
    }

    .icons {
      margin-top: 50rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      color: red;

      .icon-item {
        width: 60rpx;
        height: 60rpx;

        background: #D8D8D8;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .item-select {
        background: #91C788;
      }
    }

    .d-address {
      margin-top: 50rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .btn-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom);

    button {
      width: 690rpx;
      height: 84rpx;
      background: #43A833;
      color: #fff;
      border-radius: 20rpx;
      text-align: center;
      font-size: 32rpx;
    }
  }
}

button::after {
  border: none;
}
</style>
